<template>
  <div class="app-container">
    <div style="width: 1024px; margin: 0 auto">
      <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="140px" :disabled="isDisabled">
        <el-row>
          <el-col :span="12">
            <el-form-item label="系统编号" prop="sysCode">
              <el-select v-model="submitParams.sysCode" clearable placeholder="系统编号" style="width: 100%">
                <el-option
                  v-for="dict in dictMap.IBPS_SYS_CODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="发起方" prop="sender">
              <el-input v-model="submitParams.sender" :disabled="true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发起方名称" prop="senderName" label-width="95px">
              <el-input v-model="submitParams.senderName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="接收方" prop="receiver">
              <el-input v-model="submitParams.receiver" @change="checkbankcode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="20px">
              <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog">
                行名行号查询
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="接收方所属CCPC" prop="rcverDirect">
              <el-input v-model="submitParams.rcverDirect" :disabled="true" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="接收方名称" prop="rcverName" label-width="95px">
              <el-input v-model="submitParams.rcverName" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="信息内容" prop="content">
              <el-input v-model="submitParams.content" maxlength="500" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input v-model="submitParams.remarks" maxlength="256" show-word-limit type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button type="primary" @click="submitForm" v-loading.fullscreen.lock="loading" v-if="showBtn">
          提 交
        </el-button>
        <el-button type="primary" @click="refresh">重 置</el-button>
      </div>

      <ibps-bank-branch-dialog ref="ibpsBankBranchDialog" @confirm="confirmBankBranch"></ibps-bank-branch-dialog>
    </div>
  </div>
</template>

<script>
import { findFreeEntry } from "@/api/ibps/ccms/303";
import { listPageMixin } from "@/libs/listPageMixin";
import IbpsBankBranchDialog from "@/views/components/IbpsBankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
import { mapGetters } from "vuex";
export default {
  name: "FreeFormatEntry",
  mixins: [listPageMixin],
  components: { IbpsBankBranchDialog },
  computed: {
    ...mapGetters(["name", "globalBusData"]),
  },
  created() {
    this.$set(this.submitParams, "sender", this.globalBusData.stCnapsBrno);
    this.$set(this.submitParams, "senderName", this.globalBusData.cnapsBrname);
  },
  watch: {
    globalBusData: {
      handler(val) {
        this.$set(this.submitParams, "sender", val.cnapsBrno);
        this.$set(this.submitParams, "senderName", val.cnapsBrname);
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      showBtn: true,
      loading: false,
      isDisabled: false,
      // 录入参数
      submitParams: {
        sysCode: "IBPS",
        sender: undefined,
        senderName: undefined,
        rcver: undefined,
        rcverDirect: undefined,
        rcverName: undefined,
        content: undefined,
        remarks: undefined,
      },

      //
      searchFormDictList: ["DRCTCODE", "IBPS_SYS_CODE", "PROCESSSTATUS", "TXN_SOURCE", "PKG_STATUS"],

      rules: {
        sysCode: [{ required: true, message: "请输入系统编号", trigger: "blur" }],
        sender: [{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        senderName: [{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        receiver: [
          { required: true, message: "请输入接收方", trigger: "blur" },
          { max: 14, message: "长度最大为14位", trigger: "blur" },
        ],
        rcverDirect: [{ max: 14, message: "长度最大为14位", trigger: "blur" }],
        rcverName: [{ max: 60, message: "长度最大为60位", trigger: "blur" }],
        content: [
          { required: true, message: "请输入信息内容", trigger: "blur" },
          { max: 500, message: "长度最大为500位", trigger: "blur" },
        ],
        remarks: [{ max: 256, message: "长度最大为256位", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      console.log("row", row);
      this.$set(this.submitParams, "receiver", row.brno);
      this.$set(this.submitParams, "rcverDirect", row.bankCenter);
      this.$set(this.submitParams, "rcverName", row.brname);
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.ibpsBankBranchDialog.show(fromFlag);
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.loading = true;
          findFreeEntry(this.submitParams)
            .then((res) => {
              this.isDisabled = true;
              this.showBtn = false;
              this.msgSuccess("录入成功");
              this.$alert(`CORE_ID: ${res.result.rspId}`, "生成交易流水号", {
                confirmButtonText: "确定",
                //刷新一下查询列表 TODO
                callback: (action) => {},
              });
              this.loading = false;
            })
            .catch((err) => {
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.showBtn = true;
      this.isDisabled = false;
      this.resetForm("submitParams");
    },

    checkbankcode: function () {
      var rcver = this.submitParams.rcver;
      getBankInfByBankCode(rcver)
        .then((response) => {
          if (response.code == "S" && response.result !== null && response.result !== undefined) {
            this.$set(this.submitParams, "rcver", response.result.bankCode);
            this.$set(this.submitParams, "rcverDirect", response.result.drctBankCode);
            this.$set(this.submitParams, "rcverName", response.result.orgFullname);
          } else {
            this.msgError("无行名行号记录");
            this.$set(this.submitParams, "rcver", null);
            this.$set(this.submitParams, "rcverDirect", null);
            this.$set(this.submitParams, "rcverName", null);
          }
        })
        .catch((err) => {
          this.msgError("无行名行号记录");
          this.$set(this.submitParams, "rcver", null);
          this.$set(this.submitParams, "rcverDirect", null);
          this.$set(this.submitParams, "rcverName", null);
        });
    },
  },
};
</script>
